<template>
  <UniPopup ref="showModalRef" :isMaskClick="isMaskClick" @change="change" :zIndex="zIndex">
    <view class="show-modal">
      <view class="modal-title">{{ title }}</view>
      <view class="modal-content" :style="{ width: contentWidth }">
        <slot v-if="useSlotsContent" name="content" />
        <text v-else>{{ content }}</text>
      </view>
      <view class="modal-bottom">
        <button
          v-if="showCancel"
          class="bottom-btn cancel"
          :style="{ color: cancelColor }"
          type="none"
          @click="handleClose"
        >
          {{ cancelText }}
        </button>
        <button
          v-if="showConfirm"
          class="bottom-btn submit"
          type="none"
          :open-type="openType"
          :id="Share_ButtonId"
          :style="{ color: confirmColor }"
          @click="confirm"
        >
          {{ confirmText }}
        </button>
      </view>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { propTypes } from '@/utils/propTypes';
  import { getCurrentInstance, onMounted, type PropType, watch } from 'vue';
  import { useSlots } from 'vue';
  import { ShareButtonId } from '@/enums/shareEnum';
  import { useDebounceFn } from '@/hooks/core/useDebounceFn';

  /**
   * 禁止滚动穿透, 在页面最外层添加以下代码
   * <page-meta :page-style="'overflow:' + (isShow ? 'hidden' : 'visible')"></page-meta>
   */

  const props = defineProps({
    modelValue: propTypes.bool.def(false),
    /** 是否立即弹出 */
    immediate: propTypes.bool.def(false),
    /** 弹窗标题 */
    title: propTypes.string.def('提示'),
    /** 内容 */
    content: propTypes.string.def(''),
    /** 是否显示取消按钮 */
    showCancel: propTypes.bool.def(true),
    /** 取消按钮文字 */
    cancelText: propTypes.string.def('取消'),
    /** 取消按钮文字颜色 */
    cancelColor: propTypes.string.def('#999996'),
    /** 是否显示定按钮 */
    showConfirm: propTypes.bool.def(true),
    /** 确定按钮文字 */
    confirmText: propTypes.string.def('确定'),
    /** 确定按钮文字颜色 */
    confirmColor: propTypes.string.def('#2878ff'),
    /** 确定按钮的open-type */
    openType: String as PropType<JSX.IntrinsicElements['button']['openType']>,
    /** 是否点击蒙层关闭弹窗 */
    isMaskClick: propTypes.bool.def(true),
    /** 确定按钮的id */
    Share_ButtonId: propTypes.string.def(ShareButtonId.MODELSHAREBTN),
    /** 是否点击确定后自动关闭弹窗 */
    confirmAutoClose: propTypes.bool.def(true),
    /** 内容区块宽度 */
    contentWidth: propTypes.string.def('80%'),
    zIndex: propTypes.number.def(99),
  });

  const useSlotsContent = !!useSlots().content;

  const emit = defineEmits(['close', 'update:modelValue', 'confirm']);

  const _this = getCurrentInstance();

  watch(
    () => props.modelValue,
    (val) => (val ? openPopup() : closePopup()),
  );

  const openPopup = (direction: string = 'center') => {
    (_this?.refs['showModalRef'] as any).open(direction);
  };

  const closePopup = (direction: string = 'center') => {
    (_this?.refs['showModalRef'] as any).close(direction);
  };

  function change(e: { show: boolean; type: string }) {
    const { show } = e;
    if (!show) {
      emit('update:modelValue');
    }
  }

  const confirm = useDebounceFn(
    () => {
      props.confirmAutoClose && closePopup();
      emit('confirm');
    },
    500,
    { immediate: true },
  );

  function handleClose() {
    emit('close');
    closePopup();
  }

  onMounted(() => {
    props.immediate && openPopup();
  });
</script>

<style lang="scss" scoped>
  .show-modal {
    width: 600rpx;
    min-height: 326rpx;
    border-radius: 32rpx;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .modal-title {
      padding-top: 42rpx;
      flex-shrink: 0;
      color: #333;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
    }
    .modal-content {
      margin: 0 auto;
      text-align: center;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #808080;
    }
    .modal-bottom {
      height: 96rpx;
      flex-shrink: 0;
      border-top: 1px solid #ebedf0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      .bottom-btn {
        height: 96rpx;
        line-height: 96rpx;
        flex: 1;
        text-align: center;
        color: #2878ff;
        font-size: 32rpx;
        border-radius: 0;
        &:active {
          background-color: rgba($color: #000000, $alpha: 0.1);
        }
      }
      .cancel {
        border-right: 1px solid #ebedf0;
      }
    }
  }
</style>
